<!doctype html>
<html lang="zh-CN" data-theme="light">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
  <title>四象限任务进度管理</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <header class="app-header">
    <div class="left">
      <button id="btnNewTask" class="btn primary">新建任务</button>
      <button id="btnNewIdea" class="btn">新增临时想法</button>
      <button id="btnSettings" class="btn">设置</button>
    </div>
    <div class="center">
      <span class="app-title">四象限任务进度管理</span>
    </div>
    <div class="right">
      <select id="themeSwitcher" class="select">
        <option value="light">浅色</option>
        <option value="dark">深色</option>
        <option value="solar">暖色</option>
        <option value="contrast">高对比</option>
      </select>
      <button id="btnToggleMinimapLock" class="btn">小地图锁定</button>
      <button id="btnExport" class="btn">导出数据</button>
      <button id="btnImport" class="btn">导入数据</button>
    </div>
  </header>

  <main class="app-main">
    <aside class="sidebar">
      <section class="panel ideas-panel">
        <div class="panel-header">
          <h3>临时想法</h3>
          <div class="panel-actions">
            <button id="btnClearIdeas" class="btn small">清空</button>
          </div>
        </div>
        <div id="ideasList" class="panel-body ideas-list" data-droppable="ideas"></div>
        <div class="panel-footer tip">提示：将想法拖拽到任一象限以转为正式任务。</div>
      </section>

      <section class="panel trash-panel">
        <div class="panel-header">
          <h3>回收站</h3>
          <div class="panel-actions">
            <button id="btnEmptyTrash" class="btn small danger">清空</button>
          </div>
        </div>
        <div id="trashList" class="panel-body trash-list"></div>
      </section>
    </aside>

    <section class="matrix">
      <div class="matrix-grid">
        <div class="cell" data-quadrant="q1">
          <div class="cell-header"><h4>紧急 & 重要</h4></div>
          <div class="cell-body droppable" id="q1" data-quadrant="q1"></div>
        </div>
        <div class="cell" data-quadrant="q2">
          <div class="cell-header"><h4>不紧急 & 重要</h4></div>
          <div class="cell-body droppable" id="q2" data-quadrant="q2"></div>
        </div>
        <div class="cell" data-quadrant="q3">
          <div class="cell-header"><h4>紧急 & 不重要</h4></div>
          <div class="cell-body droppable" id="q3" data-quadrant="q3"></div>
        </div>
        <div class="cell" data-quadrant="q4">
          <div class="cell-header"><h4>不紧急 & 不重要</h4></div>
          <div class="cell-body droppable" id="q4" data-quadrant="q4"></div>
        </div>
      </div>
    </section>
  </main>

  <!-- 小地图 -->
  <div id="minimap" class="minimap" data-locked="true">
    <div class="minimap-header">
      <span>小地图</span>
      <div class="mini-legend">
        <span class="dot dot-q1"></span>Q1
        <span class="dot dot-q2"></span>Q2
        <span class="dot dot-q3"></span>Q3
        <span class="dot dot-q4"></span>Q4
      </div>
    </div>
    <div class="minimap-body">
      <div class="mini-grid">
        <div class="mini-cell" data-mini="q1"><div class="mini-stats" id="mini-q1"></div></div>
        <div class="mini-cell" data-mini="q2"><div class="mini-stats" id="mini-q2"></div></div>
        <div class="mini-cell" data-mini="q3"><div class="mini-stats" id="mini-q3"></div></div>
        <div class="mini-cell" data-mini="q4"><div class="mini-stats" id="mini-q4"></div></div>
      </div>
    </div>
  </div>

  <!-- 任务弹窗 -->
  <dialog id="taskDialog" class="modal">
    <form method="dialog" class="modal-form" id="taskForm">
      <h3 id="taskDialogTitle">新建任务</h3>
      <div class="grid-2">
        <label><span>标题</span><input type="text" id="taskTitle" required /></label>
        <label>
          <span>所属象限</span>
          <select id="taskQuadrant">
            <option value="q1">紧急&重要</option>
            <option value="q2">不紧急&重要</option>
            <option value="q3">紧急&不重要</option>
            <option value="q4">不紧急&不重要</option>
          </select>
        </label>
        <label><span>开始时间</span><input type="datetime-local" id="taskStartAt" /></label>
        <label><span>完成期限</span><input type="datetime-local" id="taskDueAt" /></label>
        <label><span>提醒时间</span><input type="datetime-local" id="taskRemindAt" /></label>
        <label><span>完成进度（%）</span><input type="number" id="taskProgress" min="0" max="100" step="1" value="0" /></label>
      </div>
      <label><span>备忘录</span><textarea id="taskMemo" rows="4" placeholder="补充说明..."></textarea></label>
      <menu class="modal-actions">
        <button value="cancel" class="btn">取消</button>
        <button id="taskSubmit" value="default" class="btn primary">保存</button>
      </menu>
      <input type="hidden" id="taskId" />
    </form>
  </dialog>

  <!-- 想法弹窗 -->
  <dialog id="ideaDialog" class="modal">
    <form method="dialog" class="modal-form" id="ideaForm">
      <h3>新增临时想法</h3>
      <label><span>内容</span><textarea id="ideaContent" rows="4" required placeholder="此刻的灵感..."></textarea></label>
      <label><span>记录时间</span><input type="datetime-local" id="ideaTime" /></label>
      <menu class="modal-actions">
        <button value="cancel" class="btn">取消</button>
        <button id="ideaSubmit" value="default" class="btn primary">保存</button>
      </menu>
    </form>
  </dialog>

  <!-- 设置弹窗 -->
  <dialog id="settingsDialog" class="modal">
    <form method="dialog" class="modal-form" id="settingsForm">
      <h3>设置</h3>
      <div class="grid-2">
        <label>
          <span>主题</span>
          <select id="cfgTheme">
            <option value="light">浅色</option>
            <option value="dark">深色</option>
            <option value="solar">暖色</option>
            <option value="contrast">高对比</option>
          </select>
        </label>
        <label><span>提醒阈值（分钟）</span><input type="number" id="cfgReminderThreshold" min="1" step="1" value="30" /></label>
        <label>
          <span>小地图默认锁定</span>
          <select id="cfgMinimapLocked">
            <option value="true">锁定</option>
            <option value="false">解锁</option>
          </select>
        </label>
        <label>
          <span>存储方式</span>
          <select id="cfgStorage">
            <option value="file">本地临时文件（JSON）</option>
            <option value="local">本地数据库（LocalStorage）</option>
            <option value="remote">后端接口</option>
          </select>
        </label>
        <label data-storage="file"><span>数据文件名（同目录）</span><input type="text" id="cfgDataFile" placeholder="tasks.json" /></label>
        <label data-storage="file"><span>配置文件名（同目录）</span><input type="text" id="cfgConfigFile" placeholder="config.json" /></label>
        <label data-storage="remote"><span>远端读取URL</span><input type="url" id="cfgRemoteLoad" placeholder="https://api.example.com/tasks" /></label>
        <label data-storage="remote"><span>远端保存URL</span><input type="url" id="cfgRemoteSave" placeholder="https://api.example.com/tasks" /></label>
      </div>
      <menu class="modal-actions">
        <button value="cancel" class="btn">取消</button>
        <button id="settingsSubmit" value="default" class="btn primary">保存</button>
      </menu>
    </form>
  </dialog>

  <!-- 模板们 -->
  <template id="taskCardTpl">
    <article class="task-card" draggable="true">
      <div class="task-header drag-handle">
        <div class="title"></div>
        <div class="actions">
          <button class="btn small" data-action="toggle">收起</button>
          <button class="btn small" data-action="edit">编辑</button>
          <button class="btn small success" data-action="done">完成</button>
          <button class="btn small danger" data-action="delete">删除</button>
        </div>
      </div>
      <div class="task-body">
        <div class="row">
          <div class="meta">
            <span class="meta-item">开始：<em class="startAt">—</em></span>
            <span class="meta-item">截止：<em class="dueAt">—</em></span>
            <span class="meta-item">提醒：<em class="remindAt">—</em></span>
          </div>
        </div>
        <div class="row progress-row">
          <label class="progress-label">进度</label>
          <input class="progress-range" type="range" min="0" max="100" step="1" />
          <span class="progress-text">0%</span>
        </div>
        <div class="row">
          <details class="memo">
            <summary>备忘录</summary>
            <div class="memo-content"></div>
          </details>
        </div>
      </div>
    </article>
  </template>

  <template id="ideaCardTpl">
    <article class="idea-card" draggable="true">
      <div class="idea-header drag-handle">
        <div class="content"></div>
        <div class="actions">
          <button class="btn small" data-action="promote">转为任务</button>
          <button class="btn small danger" data-action="delete">删除</button>
        </div>
      </div>
      <div class="idea-body">
        <div class="time">—</div>
      </div>
    </article>
  </template>

  <template id="trashItemTpl">
    <article class="trash-item">
      <div class="head">
        <span class="label"></span>
        <div class="actions">
          <button class="btn small" data-action="restore">还原</button>
          <button class="btn small danger" data-action="purge">彻底删除</button>
        </div>
      </div>
      <div class="info"></div>
    </article>
  </template>

  <script src="./renderer.js"></script>
</body>
</html>
